<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSBA Graphical Tool</title>
    <style>
        body {
            display: flex;
            margin: 0;
            font-family: Arial, sans-serif;
            background-color: #fffbe6;
        }

        #sidebar {
            width: 20%;
            background-color: #ffd700;
            padding: 20px;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
            overflow-y: auto;
        }

        #block-library {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .code-block {
            background-color: #fff;
            padding: 10px;
            border-radius: 5px;
            cursor: grab;
            transition: background-color 0.3s ease;
        }

        .code-block:hover {
            background-color: #f0f0f0;
        }

        #main {
            width: 80%;
            padding: 20px;
        }

        #editor-container {
            margin-bottom: 20px;
        }

        #mytext {
            width: 100%;
            height: 300px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-family: monospace;
            resize: vertical;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div id="sidebar">
        <h2>Code Block Library</h2>
        <div id="block-library">
            <div class="code-block" data-code="world:" data-placeholder="Please enter paragraph text">Paragraph Text</div>
            <div class="code-block" data-code="li:" data-placeholder="Please enter list item content">List Item</div>
            <div class="code-block" data-code="div-start:" data-placeholder="Please enter the ID of the div">Start Div Block</div>
            <div class="code-block" data-code="div-end" data-placeholder="">End Div Block</div>
            <div class="code-block" data-code="ul-start" data-placeholder="">Start Unordered List</div>
            <div class="code-block" data-code="ul-end" data-placeholder="">End Unordered List</div>
            <div class="code-block" data-code="ol-start" data-placeholder="">Start Ordered List</div>
            <div class="code-block" data-code="ol-end" data-placeholder="">End Ordered List</div>
            <div class="code-block" data-code="title:" data-placeholder="Please enter the main title content">Main Title</div>
            <div class="code-block" data-code="smalltitle:" data-placeholder="Please enter the subtitle content">Subtitle</div>
            <div class="code-block" data-code="bodycolor:" data-placeholder="Please enter the background color (e.g., yellow)">Set Background Color</div>
            <div class="code-block" data-code="alert:" data-placeholder="Please enter the alert message">Alert Message</div>
            <div class="code-block" data-code="a:" data-placeholder="Please enter the link address and link text, separated by a space">Link</div>
            <div class="code-block" data-code="photo:" data-placeholder="Please enter the image address, image description, width, and height, separated by spaces">Image</div>
            <div class="code-block" data-code="input:" data-placeholder="Please enter the input box ID, width, and height, separated by spaces">Input Box</div>
            <div class="code-block" data-code="other:" data-placeholder="Please enter other HTML code content">Other HTML Code</div>
            <div class="code-block" data-code="other-css:" data-placeholder="Please enter other CSS code content">Other CSS Code</div>
            <div class="code-block" data-code="other-js:" data-placeholder="Please enter other JavaScript code content">Other JavaScript Code</div>
        </div>
    </div>
    <div id="main">
        <h1>Just code your JSBA now!</h1>
        <div id="editor-container">
            <textarea id="mytext" rows="10" cols="80"></textarea>
        </div>
    </div>
    <script>
        const textarea = document.getElementById('mytext');
        const codeBlocks = document.querySelectorAll('.code-block');

        codeBlocks.forEach(block => {
            block.addEventListener('click', () => {
                const baseCode = block.dataset.code;
                const placeholder = block.dataset.placeholder;

                if (baseCode.endsWith(':')) {
                    const userInput = prompt(placeholder);
                    if (userInput!== null) {
                        textarea.value += baseCode + userInput + '\n';
                    }
                } else {
                    textarea.value += baseCode + '\n';
                }
            });
        });
    </script>
</body>

</html>